<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome</title>
        <link type="text/css" href="resources/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
        <link type="text/css" href="resources/css/screen.css" rel="stylesheet" />
        <link type="text/css" href="resources/css/app.css" rel="stylesheet" />
        <script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery-ui-1.8.16.custom.min.js"></script>
        <style>
            .ui-autocomplete-loading { background: white url('resources/images/ui-anim_basic_16x16.gif') right center no-repeat; }
        </style>
        <script>
            $(document).ready(function() {

                function search(text) {
                    $("#search").val(text);
                    $("#searchform").submit();
                }

                $('#searchbutton').button();

                $( "#search" ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "search",
                            dataType: "json",
                            data: {
                                maxRows: 12,
                                term: request.term
                            },
                            success: function( data ) {
                                response( $.map( data, function( item ) {
                                    return {
                                        label: item.displayName,
                                        value: item.displayName
                                    }
                                }));
                            }
                        });
                    },
                    minLength: 2,
                    select: function( event, ui ) {
                        search(ui.item.label);
                    },
                    open: function() {
                        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
                    },
                    close: function() {
                        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
                    }
                });


                var ticker = function()
                {
                    setTimeout(function(){
                        $('#ticker li:first').animate( {marginTop: '-120px'}, 800, function()
                        {
                            $(this).detach().appendTo('ul#ticker').removeAttr('style');
                        });
                        ticker();
                    }, Math.floor(Math.random()*11000));
                };
                ticker();
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div class="container showgrid">
                <div id="header" class="span-15 prepend-4 append-5 last">
                    <h1 id="logo"></h1>
                </div>
                <div id="siteDescription" class="span-19 prepend-1 append-4">
                    <h2>
                        A database of <c:out value="${totalResults}"/> results
                    </h2>
                    <h2>Latest Race <a href="race?id=${latestRace.id}"><c:out value="${latestRace.name}"/>
                        <fmt:formatDate value="${latestRace.date}" type="DATE" pattern="MMM-dd-yyyy"/></a></h2>
                </div>
                <div id="searchbar2" class="span-6 prepend-5 append-9 last">
                    <form id="searchform" action="search" method="post">
                        <div class="ui-widget">
                            <input id="search" name="search" size="35"/>
                            <input id="searchbutton" type="submit" value="GO!"/>
                        </div>
                    </form>
                </div>
                <div id="latestsearches" class="span5 prepend-9 append-10 LAST">
                    <ul id="ticker">
                        <c:forEach var="latestSearch" items="${latestSearches}">
                            <li><a href="${latestSearch.link}">${latestSearch.term}</a></li>
                        </c:forEach>
                    </ul>
                </div>
                <div id="footer" class="span-5">
                    <footer>
                        <img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" alt="Powered by Google App Engine" />
                    </footer>
                </div>
            </div>
        </div>
    </body>
</html>
